<template>
  <div class="soldchacao">
    <div class="mokuai1">
      <h3>子组件的内容</h3>
      <p>插槽子组件接收父组件使用solt</p>
      <!-- 后备内容他也称为默认内容 -->
      <slot>默认内容，当父组件不传递插槽，但是子组件有插槽，可以写一个默认内容。传递了就显示父组件的插槽内容</slot>
    </div>
    <div class="mokuai2" style>
      <h3>多个插槽的使用</h3>
      <slot name="header"></slot>
      <p>插槽中间部分内容</p>
      <slot name="footer"></slot>
    </div>
    <div class="mokuai1">
      <h3>作用域：子组件有个数据，显示，他是需要先传给父组件，父组件包装之后再给子组件</h3>
      <p>就是子组件绑定,父子间等于这个msg</p>
      <slot name="header"></slot>
      <p>插槽中间部分内容</p>
      <slot name="footer" :msg="msg"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "soldchacao",
  data() {
    return {
      msg: "他是需要先传给父组件，父组件包装之后再给子组件"
    };
  }
};
</script>

<style>
</style>